iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
DevOps

翻新ASP.NET Webform成Blazor Server App之可靠升級法透過Robot framework系列 第 1

.NET Webform升級成Blazor Server App D1 工程環境建置

  • 分享至 

  • xImage
  •  

前言

維護舊的系統,如:ASP.NET Webform、ASP.NET MVC,難免面臨效能慢,畫面陽春,功能簡單,而且不相容新技術等問題,實在是一大困擾。為了解決上述問題,利於導入新技術,增加開發效率,搜尋市面上的工具後,發現Blazor這套網頁開發工具,其實是Webform的升級版,適合快速開發前後端時。相對其他工具,使用較少的語言與技術,而且相對老舊的Webform,不僅能做到跨平台開發,又能保有舊系統的開發理念-全端開發並且與新技術接軌,對於IT日後持續開發與維護微軟系統的工作來說,是一個即時需要學習的工具。軟體系統透過一次重大的更新與重構後,減少日後許多維護的成本,何樂而不為?本篇舉一個實例情境,重頭到尾根據官方文件以及網路上的工具,將Webform更新成Blazor Server App,最後通過自動化測試,測試其效能表現。

建置開發環境

安裝軟體開發工具包 .NET SDK

點擊以下連結,下載合乎作業系統版本的.NET SDK,安裝之
https://dotnet.microsoft.com/en-us/download
以Windows系統為例,安裝過程如下:
-1. 安裝https://ithelp.ithome.com.tw/upload/images/20220916/20151458NdOBkwa2IX.png
-2. 關閉https://ithelp.ithome.com.tw/upload/images/20220916/20151458XoMVO0Ej8r.png

安裝軟體編輯器 VS Code

同理,安裝
https://code.visualstudio.com/download
-1. 下一步https://ithelp.ithome.com.tw/upload/images/20220916/20151458cbtuynjm4m.png
-2. 建議選擇加入PATHhttps://ithelp.ithome.com.tw/upload/images/20220916/20151458aA72OZwEV9.png
-3. 安裝https://ithelp.ithome.com.tw/upload/images/20220916/20151458l5W6JCxfL8.png
-4. 關閉https://ithelp.ithome.com.tw/upload/images/20220916/20151458XjmMqzIiVW.png

安裝C# Extension for VS Code

方法一

-1. 在左列工具列找到「延伸模組」,搜尋C#https://ithelp.ithome.com.tw/upload/images/20220916/20151458JadCHBpquz.png
-2. 按下安裝後https://ithelp.ithome.com.tw/upload/images/20220916/201514587IRzZTzp5u.png

方法二

-1. 到Visual Studio Marketplace搜尋C# for Visual Studio Codehttps://ithelp.ithome.com.tw/upload/images/20220916/20151458MwRA9HrM6o.png
-2. 點選安裝https://ithelp.ithome.com.tw/upload/images/20220916/20151458ssIPVXHwBV.png
-3. 允許開啟VS Codehttps://ithelp.ithome.com.tw/upload/images/20220916/20151458QFEtdbfdo0.png
-4. 安裝C# for Visual Studio Code後https://ithelp.ithome.com.tw/upload/images/20220916/201514589svvegQLBe.png

建立Blazor 專案

-在測試環境,開啟終端機
https://ithelp.ithome.com.tw/upload/images/20220916/20151458V4mNekw9vE.png
-輸入指令確認版本https://ithelp.ithome.com.tw/upload/images/20220916/201514587evSJvQGfT.png

dotnet --version

-建立一個新的伺服器端的blazor專案https://ithelp.ithome.com.tw/upload/images/20220916/20151458W507jnm7Bj.png

出現亂碼之解法

-1點選左下角的設定/settinghttps://ithelp.ithome.com.tw/upload/images/20220916/201514581tOxfn4jjs.png
-2勾選自動偵測編碼以及調整編碼成Big5以輸出繁體文字https://ithelp.ithome.com.tw/upload/images/20220916/20151458zqQtBRaWt4.png
-3開啟setting.jsonhttps://ithelp.ithome.com.tw/upload/images/20220916/20151458BnFTKM8pYG.png
-4輸入設定語法後儲存並重新建立一個新專案測試https://ithelp.ithome.com.tw/upload/images/20220916/20151458fUbMSbGd6p.png

    "terminal.integrated.shell.windows":"C:\\WINDOWS\\System32\\cmd.exe",
    "terminal.integrated.shellArgs.windows": [ "/K chcp 65001 >nul"],
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
    "terminal.integrated.shellArgs.windows": ["-NoExit", "chcp 65001"],
    "terminal.integrated.fontFamily": "Lucida Console",
    "[cpp]": {
    "files.encoding": "gbk"
    },
    "[c]": {
    "files.encoding": "gbk"
    }

經過上述步驟,順利地建置完工程環境!


下一篇
.NET Webform升級成Blazor Server App D2 舊軟體分析工具
系列文
翻新ASP.NET Webform成Blazor Server App之可靠升級法透過Robot framework26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言